{% extends 'base.html' %}
{% load humanize %}

{% block title %}Department Performance Report - {{ department.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Department Performance Report</h1>
        <div>
            <a href="javascript:window.print()" class="btn btn-primary btn-sm">
                <i class="fas fa-print fa-sm text-white-50"></i> Print Report
            </a>
            <a href="{% url 'dashboard' %}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left fa-sm text-white-50"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ department.name }} - Performance Overview</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        Total Tasks</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_tasks|intcomma }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-tasks fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        Completed Tasks</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ completed_tasks|intcomma }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                        In Progress</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ in_progress_tasks|intcomma }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-spinner fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        Completion Rate</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">
                                        {{ completion_rate|floatformat:1 }}%
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-percent fa-2x text-gray-300"></i>
                                </div>
                            </div>
                            <div class="mt-2">
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-info" role="progressbar" 
                                         style="width: {{ completion_rate }}%" 
                                         aria-valuenow="{{ completion_rate }}" 
                                         aria-valuemin="0" 
                                         aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Task Status Distribution</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-pie pt-4">
                                <canvas id="taskStatusChart"></canvas>
                            </div>
                            <div class="mt-4 text-center small">
                                <span class="mr-2">
                                    <i class="fas fa-circle text-success"></i> Completed
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-primary"></i> In Progress
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-warning"></i> Pending
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Tasks by Priority</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-pie pt-4">
                                <canvas id="taskPriorityChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Task Status Pie Chart
(function() {
    'use strict';
    
    // Task Status Chart
    var ctx = document.getElementById('taskStatusChart');
    if (ctx) {
        var taskStatusChart = new Chart(ctx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Completed', 'In Progress', 'Pending'],
                datasets: [{
                    data: [
                        {{ completed_tasks|default:0 }}, 
                        {{ in_progress_tasks|default:0 }}, 
                        {{ pending_tasks|default:0 }}
                    ],
                    backgroundColor: ['#1cc88a', '#4e73df', '#f6c23e'],
                    hoverBackgroundColor: ['#17a673', '#2e59d9', '#dda20a'],
                    hoverBorderColor: 'rgba(234, 236, 244, 1)'
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: 'rgb(255,255,255)',
                    bodyFontColor: '#858796',
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 70
            }
        });
    }

    // Task Priority Chart
    var ctx2 = document.getElementById('taskPriorityChart');
    if (ctx2) {
        var taskPriorityChart = new Chart(ctx2.getContext('2d'), {
            type: 'bar',
            data: {
                labels: ['High', 'Medium', 'Low'],
                datasets: [{
                    label: 'Tasks',
                    backgroundColor: ['#e74a3b', '#f6c23e', '#1cc88a'],
                    data: [
                        {{ high_priority_tasks|default:0 }}, 
                        {{ medium_priority_tasks|default:0 }}, 
                        {{ low_priority_tasks|default:0 }}
                    ]
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            precision: 0
                        }
                    }]
                },
                legend: {
                    display: false
                }
            }
        });
    }
})();
</script>
{% endblock %}